// VideoPlayer.tsx
import React from 'react';
import { Card, Tag } from 'antd';
import { useState, useEffect } from 'react';

interface VideoStatus {
    played: boolean;
}

function useVideoStatus() {
    const [status, setStatus] = useState<VideoStatus>({ played: false });

    const handlePlay = () => {
        setStatus({ ...status, played: true });
    };

    const handlePause = () => {
        setStatus({ ...status, played: true });
    };

    return { status, handlePlay, handlePause };
}

interface VideoPlayerProps {
    videoUrl: string;
}

const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
    const { status, handlePlay, handlePause } = useVideoStatus();

    return (
        <Card style={{ width: 300 }}>
            <video
                width="100%"
                src={videoUrl}
                onPlay={handlePlay}
                onPause={handlePause}
                controls
            />
            <div style={{ textAlign: 'center', marginTop: 10 }}>
                <Tag color={status.played ? 'green' : 'red'}>
                    {status.played ? '已看' : '未看'}
                </Tag>
            </div>
        </Card>
    );
};

export default VideoPlayer;